<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model</title>
</head>
<body>
  <div id="app">
    {{msg}}
    <!-- <input type="text" :value="msg" @input="msg=$event.target.value"> -->
    <input type="text" v-model="msg">
    <!-- 1. 使用 :value 赋值给表单元素 -->
    <!-- 2. 使用  @input 使用表单元素改变的值去修改data中的数据 -->
    <!-- 结论：v-model指令是一个语法糖（简写代码），它简写了 :value 与 @input 两段代码 -->
    <hr>

    <!-- - 文本域 -->
    <textarea v-model="textareaStr">原始内容不生效</textarea>
    <hr>

    <!-- - 复选框 -->
    <!-- 1. 单个复选框  绑定的值是布尔类型  选中 true  不选中 false -->
    <input type="checkbox" v-model="isChecked">
    <!-- 2. 多个复选框 需要写value属性表示选中后的值  同时绑定同一个数据，数据类型数组-->
    <hr>

    <input type="checkbox" value="篮球" v-model="list">篮球
    <input type="checkbox" value="足球" v-model="list">足球

    <!-- - 单选框  需要写value属性表示选中后的值 同时绑定同一个数据，数据类型不是复杂数据类型都可以 -->
    <hr>
    <input type="radio" value="篮球" v-model="hobby">篮球
    <input type="radio" value="足球" v-model="hobby">足球

    <!-- - 下拉框 selectValue 收集的是 下拉选项选中后的值-->
    <hr>
    <select v-model="selectValue">
      <option value="">请选择</option>
      <option value="1">篮球</option>
      <option value="2">足球</option>
    </select>


  
  </div> 
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: '表单数据',
        // 文本域
        textareaStr: '我的文本域的内容',
        // 单个复选框
        isChecked: false,
        // 多个复选框
        list: [],
        // 单选框
        hobby: '篮球',
        // 下拉框
        selectValue: ''
      },
      // methods: {
      //   fn (e) {
      //     console.log(e.target.value)
      //   }
      // }
    })
  </script>
</body>
</html>